<template>
  <el-form
    size="small"
    :model="formParams"
    ref="form"
    :rules="rules"
    label-width="82px"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item 
          label="报表名称：" 
          prop="reportName"
        >
          <el-input 
            v-show="!formDisabled"
            clearable
            v-model="formParams.reportName" 
            placeholder="请输入报表名称">
          </el-input>
          <span v-show="formDisabled">{{ formParams.reportName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="是否共享："
          prop="isShare"
          label-width="170px"
        >
          <el-radio-group 
            v-show="!formDisabled"
            v-model="formParams.isShare">
            <el-radio label="1" border>是</el-radio>
            <el-radio label="0" border>否</el-radio>
          </el-radio-group>
          <span v-show="formDisabled">{{ formParams.isShare === '1' ? '是' : '否' }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          label="共享范围："
          prop="shareRange"
        >
          <el-select
            v-show="!formDisabled"
            clearable
            ref="mySelect"
            multiple
            v-model="formParams.shareRange"
            placeholder="请选择共享范围"
            @visible-change="handleOpenShare"
          >
            <el-option
              v-for="item in shareRangeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-show="formDisabled">{{ formParams.shareRange.join('、') }}</span>
        </el-form-item>
        <!-- 共享范围 -->
        <SelectShare
          ref="selectShare"
          @submitShareList="submitShareList"
        ></SelectShare>
      </el-col>
    </el-row>
  </el-form>
  
</template>

<script>
import SelectShare from './selectShare.vue'

export default {
  props: {
    formDisabled: {
      type: Boolean,
      default: false,
    }
  },
  components: {
    SelectShare,
  },
  data() {
    return {
      // formDisabled: false, // 表单是否可编辑
      formParams: {
        reportName: '',
        isShare: '0',
        shareRange: [],
      },
      shareRangeList: [],
      rules: {
        reportName: [{ required: true, message: '请输入报表名称', trigger: 'blur' }],
        isShare: [{ required: true, message: '请选择是否共享', trigger: 'change' }],
        shareRange: [{ required: true, message: '请选择共享范围', trigger: 'change' }],
      }
    }
  },
  methods: {
    resetForm() {
      this.formParams = {
        reportName: '',
        isShare: '0',
        shareRange: [],
      }
    },
    getParams() {
      return this.formParams;
    },
    // 共享范围选择
    handleOpenShare() {
      this.$refs.mySelect.blur();
      // this.$refs.selectShare.visible = true;
      this.$refs.selectShare.handleOpen([9, 10]);

    },
    // 共享范围回显
    submitShareList(val) {
      console.log(val);
      this.sharListLabels = val.map( item => item.label)
      this.sharListIds = val.map( item => item.id)
      this.formParams.shareRange = this.sharListLabels;
    },
    handleValidForm() {
      this.$refs.form.validate().then(() => {
        console.log('校验通过')
        return true
      }).catch(() => {
        console.log('校验不通过')
        return
      })
    }

  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-form-item__label {
  padding: 0px;
}
.el-input {
  width: 282px;
}
  
</style>